<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片编辑</title>
<#include "/WEB-INF/content/module-edit.html">
<script src="${request.contextPath}/res/kindeditor/kindeditor.js"></script>
<script src="${request.contextPath}/res/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
var sysStatus = [
    {"id":"0","text":"正常"},
    {"id":"1","text":"禁用"}
];
var oper=[
	{"id":"0","text":"是"},
	{"id":"1","text":"否"}
];
var sysImgtype=[
    {"id":"big","text":"大图"},
    {"id":"normal","text":"中图"},
    {"id":"small","text":"小图"}
];
var max=${array?size};
var editor;
KindEditor.ready(function(K){
	editor=K.editor({
		allowFileManager : true
	});
});
$(function(){
	init();
 });
 
 function init(){
	 if(max==0){
		 plus(1);
	 }else{
		 for(var i=1;i<=max;i++){
			 loadPlug(i);
		 }
	 }
 }
 
 function mis(i){
	var url= moduleUrl.substring(0, moduleUrl.lastIndexOf("/"));
	var _id=$("#_id"+i).val();
	if (_id == "") {
		$("#form"+i).remove();
		if($("#p").find("form").length==0){
			plus(1);
		}
	} else {
		if(confirm("确定要删除该记录吗?")){
			url=url+"/delete";
			$("#form"+i).ajaxSubmit({
				url : url,
				success : function(data) {
					if (data.state) {
						top.showMsg("操作成功");
						$("#form"+i).remove();
						if($("#p").find("form").length==0){
							plus(1);
						}						
					} else {
						top.showMsg("操作失败");
					}
				}
			});		
		}
	}
 }

function sub(i){
	var sizes=${map.sizes!0};
	var width=${map.width!0};
	var height=${map.height!0};
	var othersizes=${map.otherSizes!0};
	var otherwidth=${map.otherWidth!0};
	var otherheight=${map.otherHeight!0};
	var isMain=$("#ismain"+i).combobox("getValue");
	if (!$("#form"+i).form('validate'))
		return;
<#if _id??>
var y=$("#size"+i).val();
if(y&&y.length>0){
	if($("#size"+i).val()<=((isMain==0?sizes:othersizes)*1024)){
		if($("#width"+i).val()==(isMain==0?width:otherwidth)){
			if($("#height"+i).val()==(isMain==0?height:otherheight)){
			}else{
				top.showMsg("图片高度不等于"+(isMain==0?height:otherheight)+"像素");
				return;
			}
		}else{
			top.showMsg("图片宽度不等于"+(isMain==0?width:otherwidth)+"像素");
			return;
		}
	}else{
		top.showMsg("图片大小不能超过"+(isMain==0?sizes:othersizes)+"kb");
		return;
	}	
}
<#else>
if($("#size"+i).val()<=((isMain==0?sizes:othersizes)*1024)){
	if($("#width"+i).val()==(isMain==0?width:otherwidth)){
		if($("#height"+i).val()==(isMain==0?height:otherheight)){
		}else{
			top.showMsg("图片高度不等于"+(isMain==0?height:otherheight)+"像素");
			return;
		}
	}else{
		top.showMsg("图片宽度不等于"+(isMain==0?width:otherwidth)+"像素");
		return;
	}
}else{
	top.showMsg("图片大小不能超过"+(isMain==0?sizes:othersizes)+"kb");
	return;
}	
</#if>
	var url= moduleUrl.substring(0, moduleUrl.lastIndexOf("/"));
	var _id=$("#_id"+i).val();
	if (_id == "") {
		url += "/create";
	} else {
		url += "/update";
	}
	$("#form"+i).ajaxSubmit({
		url : url,
		success : function(data) {
			if (data.state) {
				if(_id==""){
					$("#_id"+i).val(data.info);
				}
				top.showMsg("操作成功");
			} else {
				top.showMsg("操作失败");
			}
		}
	});		
}

function plus(i){
//	将model层隐藏，它将作为所有表单的模板，每个元素都加一个属性col用来记录当前form所属的编号
	var model=$("#model").html();
	model=model.replace('id="form"','id="form'+i+'"');
	model=model.replace('id="_id"','id="_id'+i+'"');
	model=model.replace('id="width"','id="width'+i+'"');
	model=model.replace('id="size"','id="size'+i+'"');
	model=model.replace('id="height"','id="height'+i+'"');
	model=model.replace('id="upload"','id="upload'+i+'"');
	model=model.replace('id="show"','id="show'+i+'"');
	model=model.replace('id="imgaddr"','id="imgaddr'+i+'"');
	model=model.replace('id="ismain"','id="ismain'+i+'"');
	model=model.replace('id="status"','id="status'+i+'"');
	model=model.replace('id="imgtype"','id="imgtype'+i+'"');
	model=model.replace('plus(','plus('+(i+1));
	model=model.replace('sub(','sub('+i);
	model=model.replace('mis(','mis('+i);
	
	$("#p").append(model);
	loadPlug(i);
	max=i;
}

function loadPlug(i){
	$("#upload"+i).click(function(){
 		editor.loadPlugin('image', function() {
 			editor.plugin.imageDialog({
 				showRemote:false,
 				imageUrl : $('#imgaddr'+i).val(), //如果图片路径框内有内容直接赋值于弹出框的图片地址文本框
 				//点击弹窗内”确定“按钮所执行的逻辑
 				clickFn : function(url, title, width, height, border, align) {//经过处理返回的Url是图片地址,width宽度，height高度,align是图片尺寸
 					$("#size"+i).val(align);
 					$("#width"+i).val(width);
 					$("#height"+i).val(height);
	 				$('#imgaddr'+i).val(url);//获取图片地址
	 				$("#show"+i).attr("src","${map.imgPath!}"+url);
 					editor.hideDialog(); //隐藏弹窗
 				}
 			});
		});	
	});
  	$("#status"+i).combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
  		data:sysStatus
  	}); 
  	$("#ismain"+i).combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
  		data:oper
  	});
  	$("#imgtype"+i).combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
  		data:sysImgtype
  	});
  	$("#imgaddr"+i).validatebox({
  		required:true
  	});
}
</script>
<style>
.input-width{
	width: 95%;
}
</style>
 
</head>
<body class="easyui-layout">
<div id="model" style="display:none;">
	<form id="form" method="post">
		<table class="form" cellspacing="0" style="width: 100%">
			<tbody style="border: 1px solid #ccc">
				<tr style="display: none;">
					<td colspan="3"><input id="_id" name="imgid" value=""></td>
					<td colspan="3"><input id="objectid" name="objectid" value="${(_id)!}"></td>
				</tr>
				<tr style="height:230px;">
					<td class="label">图片上传:</td>
					<td>
						<a href="#" class="easyui-linkbutton" id="upload" style="margin-left:200px;">开始上传</a>
						<input id="size" type="hidden"/><input id="width" type="hidden"/><input id="height" type="hidden"/>
					</td>
					<td class="validate"></td>
					<td class="label">展示图预览:</td>
					<td>
						<img src="#" style="width:100%;height:200px;" id="show"/>
						<input class="easyui-validatebox" required="true" value="" id="imgaddr" name="imgaddr" style="width:90%;" readonly="readonly"/>
					</td>
					<td class="validate">*</td>								
				</tr>						
				<tr>
					<td class="label">点击图片跳转地址：</td>
					<td colspan="4">
						<input name="imglink" style="width:90%;" value=""/>
					</td>
					<td class="validate"></td>
				</tr>
				<tr>
					<td class="label">图片名称：</td>
					<td>
						<input name="imgname" style="width:40%;" value=""/>
					</td>
					<td class="validate"></td>		
					<td class="label">状态：</td>
					<td><input class="status" id="status" name="status" value="0"/></td>
					<td class="validate"></td>									
				</tr>
				<tr>
					<td class="label">是否主图：</td>
					<td><input class="ismain" id="ismain" name="ismain" value="0" <#if map.type??><#if map.type!='product'>disabled="disabled"</#if></#if>/></td>
					<td class="validate"></td>
					<td class="label">图片大小：</td>	
					<td><input class="imgtype" id="imgtype" name="imgtype" value="big"/></td>
					<td class="validate"></td>					
				</tr>
			</tbody>
		</table>
		<div style="margin-left:40%;">
		<#if map.showAdd>
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-add" href="javascript:plus()">添加图片</a>
		</#if>
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-save" href="javascript:sub()">提交</a>
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-remove" href="javascript:mis()">删除图片</a>
		</div>
	</form>
</div>
	<div region="center">
		<div id="p" class="easyui-panel" style="background: #fafafa; padding: 10px" fit="true" toolbar="#toolbar">
			<#list array as item>
			<form id="form${item_index+1}" method="post">
				<table class="form" cellspacing="0" style="width: 100%">
					<tbody style="border: 1px solid #ccc">
						<tr style="display: none;">
							<td colspan="3"><input id="_id${item_index+1}" name="imgid" value="${(item.imgid)!}"></td>
							<td colspan="3"><input id="objectid" name="objectid" value="${(_id)!}"></td>
						</tr>
						<tr style="height:230px;">
							<td class="label">广告图上传:</td>
							<td>
								<a href="#" class="easyui-linkbutton" id="upload${item_index+1}" style="margin-left:200px;">开始上传</a>
								 <input id="size${item_index+1}" type="hidden"/><input id="width${item_index+1}" type="hidden"/><input id="height${item_index+1}" type="hidden"/>
							</td>
							<td class="validate"></td>
							<td class="label">展示图预览:</td>
							<td>
								<img src="${map.imgPath!}${(item.imgaddr)!}" style="width:100%;height:200px;" id="show${item_index+1}"/>
								<input class="easyui-validatebox" required="true" value="${(item.imgaddr)!}" id="imgaddr${item_index+1}" name="imgaddr" style="width:90%;" readonly="readonly"/>
							</td>
							<td class="validate">*</td>								
						</tr>						
						<tr>
							<td class="label">点击图片跳转地址：</td>
							<td colspan="4">
								<input name="imglink" style="width:90%;" value="${(item.imglink)!}"/>
							</td>
							<td class="validate"></td>
						</tr>
						<tr>
							<td class="label">图片名称：</td>
							<td>
								<input name="imgname" style="width:40%;" value="${(item.imgname)!}"/>
							</td>
							<td class="validate"></td>						
							<td class="label">状态：</td>
							<td><input class="status" id="status${item_index+1}" name="status" value="${item.status!0}" /></td>
							<td class="validate"></td>					
						</tr>
						<tr>
							<td class="label">是否主图：</td>
							<td><input class="ismain" id="ismain${item_index+1}" name="ismain" value="${item.ismain!0}" <#if map.type??><#if map.type!='product'>disabled="disabled"</#if></#if>/></td>
							<td class="validate"></td>
							<td class="label">图片大小：</td>	
							<td><input class="imgtype" id="imgtype${item_index+1}" name="imgtype" value="${item.imgtype!big}"/></td>
							<td class="validate"></td>						
						</tr>
					</tbody>
				</table>
				<div style="margin-left:40%;">
					<#if map.showAdd>
						<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-add" href="javascript:plus(${item_index+2})">添加图片</a>
					</#if>
					<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-save" href="javascript:sub(${item_index+1})">提交</a>
					<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-remove" href="javascript:mis(${item_index+1})">删除图片</a>
				</div>
			</form>
			</#list>
		</div>
	</div>
</body>
</html>